<template>
    <div class="skeleton">
        <p class="title"></p>
        <div class="bottom">
            <div class="avatar"></div>
            <div class="info">
                <p class="name"></p>
                <p class="time"></p>
            </div>
        </div>
        <div class="content">
            <p class="item" v-for="n in 15" :key="n"></p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'NoticeSkeleton'
}
</script>

<style scoped>
.skeleton{
    padding:0.1rem 0.2rem;
}
.skeleton .title{
    width:100%;
    height:0.54rem;
    background:#f2f3f5;
}
.skeleton .bottom{
    margin-top: 0.2rem;
    display: flex;
}
.skeleton .bottom .avatar{
    width:1rem;
    height:1rem;
    border-radius:100%;
    background:#f2f3f5;
    margin-right:0.2rem;
}
.skeleton .bottom .info .name{
    width:1.2rem;
    height:0.4rem;
    margin-bottom:0.16rem;
    background:#f2f3f5;
}
.skeleton .bottom .info .time{
    width:2.8rem;
    height:0.34rem;
    background:#f2f3f5;
}
.skeleton .content{
    margin-top:0.2rem;
}
.skeleton .content .item{
    width:100%;
    height:0.4rem;
    margin-bottom:0.2rem;
    background:#f2f3f5;
}
</style>